<template>
  <p-form-model :model="form">
    <div class="item">
      <div class="item-left">
        <p-form-model-item
          :label="label.number"
          prop="number"
          class="form-item"
        >
          <span>{{ form.leadsNo }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.name" prop="name" class="form-item">
          <span>{{ form.leadsName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.source" prop="source">
          <span>{{ sourceOptions[form.leadsSource] }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.customerProjectNum"
          prop="customerProjectNum"
        >
          <span>{{ form.custItemNo }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.customerProjectStage"
          prop="customerProjectStage"
        >
          <span>{{ form.custItemStep }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.customerProjectDemand"
          prop="customerProjectDemand"
        >
          <span>
            {{ form.itemDemandNum }}
            <span v-if="form.itemDemandNum">(kpcs)</span>
          </span>
        </p-form-model-item>
        <p-form-model-item :label="label.expectedPrice" prop="expectedPrice">
          <span>
            {{ form.expectPrice }} <span v-if="form.expectPrice">(元/片)</span>
          </span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.salesOrganization"
          prop="salesOrganization"
        >
          <span>{{ form.salesOrgName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.salesGroup" prop="salesGroup">
          <span>{{ form.salesGroupName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.kapmGroup" prop="kapmGroup">
          <span>{{ form.pmGroupName }}</span>
        </p-form-model-item>
      </div>
      <div class="item-right">
        <p-form-model-item :label="label.state" prop="state" class="form-item">
          <span v-if="clueState">
            {{
              stateOptions[form.currStatus] || statusOptions[form.leadsStatus]
            }}
          </span>
          <span v-else>
            {{ transferStateOptions[form.currStatus] }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.customer"
          prop="customer"
          class="form-item"
        >
          <span>{{ form.customerName }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.assessmentLevel"
          prop="assessmentLevel"
        >
          <span>{{ levelOptions[form.assessLevel] }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.customerProjectName"
          prop="customerProjectName"
        >
          <span>{{ form.customerName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.application" prop="application">
          <span>{{ applicationOptions[form.appCategory] }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.anticipatedNumber"
          prop="anticipatedNumber"
        >
          <span>
            {{ form.expectAmount }} <span v-if="form.expectAmount">(kpcs)</span>
          </span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.prospectiveValue"
          prop="prospectiveValue"
        >
          <span>
            {{ form.expectCost }}
            <span v-if="form.expectCost">(元)</span>
          </span>
        </p-form-model-item>
        <p-form-model-item :label="label.salesAreaName" prop="salesArea">
          <span>{{ customerArea[form.salesAreaName] }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.sales" prop="sales">
          <span>
            {{ form.salesName
            }}<p-icon
              v-if="form.toSalesName"
              type="arrow-right"
              style="margin: 0 10px"
            />{{ form.toSalesName }}
          </span>
        </p-form-model-item>
        <p-form-model-item :label="label.pm" prop="pm">
          <span>
            {{ form.pmName
            }}<p-icon
              v-if="form.toPmName"
              type="arrow-right"
              style="margin: 0 10px"
            />{{ form.toPmName }}
          </span>
        </p-form-model-item>
      </div>
    </div>
    <p-form-model-item :label="label.remark" prop="remark">
      <p>{{ form.remark }}</p>
    </p-form-model-item>
    <div class="item">
      <div class="item-left">
        <p-form-model-item
          :label="label.creator"
          prop="creator"
          class="form-item"
        >
          <span>{{ form.createUserName }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.createDeptName"
          prop="createDeptName"
          class="form-item"
        >
          <span>{{ form.createDeptName }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.modifier"
          prop="modifier"
          class="form-item"
        >
          <span>{{ form.updateUserName }}</span>
        </p-form-model-item>
      </div>
      <div class="item-right">
        <p-form-model-item
          :label="label.creatTime"
          prop="creatTime"
          class="form-item"
        >
          <span>{{ form.createTime }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.alterTime"
          prop="alterTime"
          class="form-item"
        >
          <span>{{ form.updateTime }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.updateDeptName"
          prop="updateDeptName"
          class="form-item"
        >
          <span>{{ form.updateDeptName }}</span>
        </p-form-model-item>
      </div>
    </div>
  </p-form-model>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {},
    },
    clueState: {
      type: Boolean,
      default: true,
    },
    label: {
      type: Object,
      default: () => ({
        number: '线索编号',
        state: '当前状态',
        name: '线索名称',
        source: '来源',
        customerProjectNum: '客户项目号',
        customerProjectStage: '客户项目阶段',
        customerProjectDemand: '客户项目需求总量',
        expectedPrice: '预期价格',
        salesOrganization: '销售组织',
        salesGroup: '销售组',
        kapmGroup: 'KAPM组',
        customer: '客户',
        assessmentLevel: '评估级别',
        customerProjectName: '客户项目名称',
        application: '应用别',
        anticipatedNumber: '预期数量',
        prospectiveValue: '预期价值',
        salesAreaName: '销售区域',
        sales: '销售',
        pm: 'PM',
        remark: '备注',
        creator: '创建人',
        createDeptName: '创建人部门',
        modifier: '修改人',
        creatTime: '创建时间',
        alterTime: '修改时间',
        updateDeptName: '修改人部门',
      }),
    },
  },
  data() {
    return {};
  },
  computed: {
    customerArea() {
      return this.$store.state.dictionary.dict['customer_area'] || {};
    },
    statusOptions() {
      return this.$store.state.dictionary.dict['leads_status'] || {};
    },
    stateOptions() {
      return this.$store.state.dictionary.dict['leads_create_status'] || {};
    },
    transferStateOptions() {
      return (
        this.$store.state.dictionary.dict['leads_transfer_process_status'] || {}
      );
    },
    auditStateOptions() {
      return (
        this.$store.state.dictionary.dict[
          'leads_transfer_biz_process_status'
        ] || {}
      );
    },
    applicationOptions() {
      return this.$store.state.dictionary.dict['application'] || {};
    },
    levelOptions() {
      return this.$store.state.dictionary.dict['leads_level'] || {};
    },
    sourceOptions() {
      return this.$store.state.dictionary.dict['leads_source'] || {};
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.item {
  display: flex;
  justify-content: space-between;
  .item-left,
  .item-right {
    width: 48%;
    display: inline-block;
  }
}

.poros-form-item {
  display: flex;
  flex-wrap: nowrap;

  //   margin-bottom: 10px;
}
// .item {
//   width: 48%;
//   display: inline-block;
// }
/deep/ .poros-form-item-label {
  width: 120px;
  margin-right: 20px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 250px);
}
</style>
